<html>
<head>
	<title>IDEJS</title>
	
	<!-- Icon -->
	<link rel="shortcut icon" href="/images/editor.ico" type="image/vnd.microsoft.icon">
	<link rel="icon" href="/images/editor.ico" type="image/vnd.microsoft.icon">
	<link rel="icon" href="/images/editor.ico" type="image/x-icon">
	
	<!-- Styles -->
	<link type="text/css" rel="stylesheet" href="/styles/main.css" />
	<link type="text/css" rel="stylesheet" href="/styles/tabs.css" />
	<link type="text/css" rel="stylesheet" href="/styles/ext-all.css" />
	
	<link type="text/css" rel="stylesheet" href="/styles/menus.css" />
	<!--<link type="text/css" rel="stylesheet" href="/styles/xtheme-gray.css" />-->
		
	<!-- Scripts -->
		<!-- Store Template variables into javascript -->
	<script type="text/javascript">
		// Copy user name if it was set into javascript variables
		var USERNAME = "";
		{% if user %}
		USERNAME = "{{user}}";
		{% endif %}
		var LOGIN_URL_HREF = "{{ url }}";
		var LOGIN_URL_NAME = "{{ url_linktext }}";
	</script>
		<!-- Extjs -->
	<script type="text/javascript" src="/scripts/ext-base.js"></script>
    <script type="text/javascript" src="/scripts/ext-all.js"></script>
	<script type="text/javascript" src="/scripts/ext.layout.js"></script>  
	<script type="text/javascript" src="/scripts/ext.filemanager.js"></script>
		<!-- jquery -->
	<script type="text/javascript" src="/scripts/jquery.js"></script>
	<script type="text/javascript" src="/scripts/jquery.metadata.js"></script>
	<script type="text/javascript" src="/scripts/json2.js"></script>
	<script type="text/javascript" src="/scripts/jquery.drawio.js"></script>
	<script type="text/javascript" src="/scripts/jquery.textarea.js"></script>
	
	<style>
		.logo{
			font-size: 9px;
		}
	</style>
	
  
	<script type="text/javascript">
    
	var saving = false;
	var loading = false;
	$(document).ready( function() {
		$('textarea').tabby();
		
		$('textarea').keydown(function(e){
			if(saving==true)
				return false;
			//$("#message").html('<span style="color:red">'+e.keyCode+'</span>');
			// Save when user presses control+s
			if(e.keyCode==83&&e.ctrlKey){
				$("#message").html('<span style="color:red">saving...</span>');
				var data = {text: this.value};
				$.post("/save/", data,
					function(data){
						saving = false;
						$("#message").html('<span style="color:green">saved</span>');
				}, "json");
				return false;
			}
			else if(e.keyCode==79&&e.ctrlKey){
				$("#message").html('<span style="color:red">loading</span>');
				var data = {text: this.value};
				$.post("/load/", data,
					function(data){
						$("#message").html('<span style="color:red">saved</span>');
						loading = false;
						$("#code").val(data);
				}, "html");
				return false;
			}
		});
		
		$('#code').focus();
		$('textarea').mouseover(function(file) {
			this.focus();
		});
	});
	</script>
</head>

<body>
	<div id="west">
		<p>Hi. I'm the west panel.</p>
	</div>
	
	<div id="toolbar"></div>
  
	<div id="south">
		<p>south - generally for informational stuff, also could be for status bar</p>
	</div>

</body>
</html>
